<template>
	<view>
		<!-- 普通用户 -->
		<uni-card v-if="!isUser">
			<!-- <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text> -->
			<view class="content" @click="cardDetails(data)">
				<!-- 左图片 -->
				<u--image v-if="data.photo !=''" :showLoading="true"
					:src="`https://lxsw.pcippc.com/api/`+ data.photo.split(',')[0]" width="100px"
					height="100px"></u--image>
				<view v-else
					style="width:100px; height:100px; display: flex;align-items: center; justify-content: center;">
					暂无图片
				</view>
				<!-- 右侧内容 -->
				<view class="right_content">
					<!-- 名称 -->
					<view class="right_title">
						{{data.apply_name}}
					</view>
					<!-- 地址 -->
					<!-- <view class="right_address rightlr">
						<view class="left">地址：</view>
						<view class="right">{{data.apply_address}}</view>
					</view> -->
					<view class="right_id rightlr">
						<view class="left">{{data.apply_type}}</view>
						<!-- <view class="right">{{data.apply_id}}</view> -->
					</view>
					<!-- 编号 -->
					<view class="right_id rightlr">
						<view class="left">工单编号：</view>
						<view class="right">{{data.apply_id}}</view>
					</view>
					<!-- 状态 -->
					<view class="right_status">
						<u-tag :text="data.status == 1 ? '待接单':(data.status == 4 ? '已退回' : (data.status ==5 ?'进行中' :'已完成'))" plain size="mini"
							:type="data.status ==1 ? 'error':(data.status == 5 ?'warning' :'success')"></u-tag>
					</view>
					<!-- 时间 -->
					<view class="right_time rightlr">
						<view class="left">申报时间：</view>
						<view class="right">{{data.apply_time}}</view>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- 管理员 -->
		<uni-card v-else>
			<!-- <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text> -->
			<view class="content" @click="cardDetails(data)">
				<!-- 左图片 -->
				<u--image v-if="data.photo !=''" :showLoading="true"
					:src="`https://lxsw.pcippc.com/api/`+ data.photo.split(',')[0]" width="100px"
					height="100px"></u--image>
				<view v-else
					style="width:100px; height:100px; display: flex;align-items: center; justify-content: center;">
					暂无图片
				</view>
				<!-- 右侧内容 -->
				<view class="right_content">
					<!-- 名称 -->
					<view class="right_title">
						{{data.companyName}}
					</view>
					<!-- 地址 -->
					<view class="right_address rightlr">
						<view class="left">地址：</view>
						<view class="right">{{data.apply_address}}</view>
					</view>
					<!-- 编号 -->
					<view class="right_id rightlr">
						<view class="left">工单编号：</view>
						<view class="right">{{data.apply_id}}</view>
					</view>
					<!-- 状态 -->
					<view class="right_status">
						<u-tag :text="data.status == 1 ? '待接单':(data.status == 5 ?'已接单':'已完成')" plain size="mini"
							:type="data.status ==1 ? 'error':(data.status == 5 ?'warning' :'success')"></u-tag>
					</view>
					<!-- 时间 -->
					<view class="right_time rightlr">
						<view class="left">申报时间：</view>
						<view class="right">{{data.apply_time}}</view>
					</view>
				</view>
			</view>
			<view style="display: flex;">
				<u-button v-if="data.status == 1" @click="takeOrders(data)">接单</u-button>
				<u-button v-else-if="data.status == 5" @click="finish(data)">完成</u-button>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		repairAccept
	} from '@/api/api.js'
	export default {
		props: ['data', 'isUser', 'userInfo'],
		methods: {
			/**
			 * @param {Object} data
			 * 详情页
			 * res.eventChannel.emit('acceptDataFromOpenerPage',data )//通过res.eventChannel.emit传递参数
			 */
			cardDetails(data) {
				uni.navigateTo({
					url: "/components/workOrder/components/details/index",
					success: res => {
						console.log('res', res)
						res.eventChannel.emit('acceptDataFromOpenerPage', this.data)
						res.eventChannel.emit('isUser', this.isUser)
					},
					fail: (fail) => {
						console.log('fail', fail)
					}
				});
			},
			// 接单
			takeOrders(item) {
				let that = this
				console.log('this.userinfo', that.userInfo)
				let params = {
					applyId: item.apply_id,
					addBy: that.userInfo.phonenumber
				}
				repairAccept(params).then(res => {
					console.log('接单', res)
					if (res.data == 'success') {
						uni.showModal({
							title: '接单成功！',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.$emit('upload', 1) //更新页面
								}
							}
						})
					} else {
						this.$emit('upload', 0) //更新页面
						uni.showModal({
							title: '接单失败！',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.$emit('upload', 0) //更新页面
								}
							}
						})
					}
				})
			},
			// 完成
			finish(item) {
				uni.navigateTo({
					url: "/components/workOrder/components/card/record/index",
					success: res => {
						console.log('res', res)
						res.eventChannel.emit('record', item)
					},
					fail: (fail) => {
						console.log('fail', fail)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		.right_content {
			margin-left: 30rpx;
			flex: 1;

			.right_title {
				font-weight: 700;
				font-size: 30rpx;
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.right_status {
				display: flex;
			}

			.rightlr {
				display: flex;

				.left {
					color: black;
				}

				.right {
					color: #999999;
					
				}
			}
		}
	}
</style>